
import { FC, useEffect, useRef } from "react"
import * as echarts from 'echarts';
import { EChartsOption } from "echarts";
import { IDateCountShipCount } from "../../../../../../../type/DataStatistics/api";

const TableThree: FC<{
    datalistThr?: IDateCountShipCount[],
}> = ({
    datalistThr
}) => {
        const echartsBox = useRef<HTMLDivElement>(null);
        let echartsClass = useRef<echarts.ECharts>();
        useEffect(() => {
            // 初始化echarts
            if (echartsBox && datalistThr) {
                var echarts_box_html = document.getElementById('echarts_box3')!;
                echartsClass.current = echarts.init(echarts_box_html);

                const Xaxis = datalistThr.map((item) => {
                    return item.consignee
                })
                const Yaxis = datalistThr.map((item) => {
                    return item.sellCount
                })
                var option: EChartsOption = {
                    grid: {
                        left: '4%',  // 左边距
                        right: '4%', // 右边距
                        bottom: '10%', // 下边距
                        top: '10%',    // 上边距
                        containLabel: true // 确保标签不被遮挡
                      },
                    legend: {
                        top: '10%',
                        left: 'center',
                    },
                    xAxis: {
                        type: 'category',
                        data: Xaxis,
                        axisLabel: { interval: 0, rotate: 30 }
                    },
                    yAxis: {
                        type: 'value',
                        name: "单位(吨)"
                    },
                    series: [
                        {
                            data: Yaxis,
                            color: '#2168F6',
                            type: 'bar',
                            barWidth: '50px'
                        },
                    ],
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params: any) {
                            console.log(params);

                            // 计算百分比
                            return `${(params.name)}-${(params.value)}吨`;
                        }
                    },
                };
                option && echartsClass.current.setOption(option);
                echartsClass.current.resize()

            }
            return () => {
                echartsClass.current?.dispose();
            }
        }, [datalistThr])
        return (
            <div id="echarts_box3" style={{
                width: '100%',
                height: '31.5rem',
                backgroundColor: '#fff',
            }} ref={echartsBox}></div>
        )
    }

export default TableThree;